<template>
  <div style="height: 100%; background-color: #232733; border-radius: 10px;" ref="chart"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { rank } from '@/utils/api';

let chart = ref(null);
let myChart = null;

const gradientColor = new echarts.graphic.LinearGradient(
  0, 0, 0, 1, // 0, 0, 0, 1 分别代表右、下、左、上，这里表示从上到下的渐变
  [
    { offset: 0, color: 'darkblue' }, // 0% 处的颜色为深蓝色
    { offset: 1, color: 'violet' } // 100% 处的颜色为紫罗兰
  ]
);

let option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        120,
        {
          value: 200,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1, // 0, 0, 0, 1 分别代表右、下、左、上，这里表示从上到下的渐变
              [
                { offset: 0, color: 'darkblue' }, // 0% 处的颜色为深蓝色
                { offset: 1, color: 'lightblue' } // 100% 处的颜色为浅蓝色
              ]
            )
          }
        },
        {
          value: 150,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1, // 0, 0, 0, 1 分别代表右、下、左、上，这里表示从上到下的渐变
              [
                { offset: 0, color: 'darkblue' }, // 0% 处的颜色为深蓝色
                { offset: 1, color: 'lightblue' } // 100% 处的颜色为浅蓝色
              ]
            )
          }
        },
        80,
        70,
        110,
        130
      ],
      type: 'bar',
      itemStyle: {
        color: gradientColor,
        borderRadius: [5, 5, 0, 0] // 圆角
      }
    }
  ]
};

const getrank = () => {
  rank().then(res => {
    console.log(res);
    option.xAxis.data = res.map(item => item.name);
    option.series[0].data = res.map(item => item.value);
    if (myChart) {
      myChart.setOption(option);
    }
  }).catch(err => {
    console.error('Failed to fetch rank data:', err);
  });
};
getrank();
onMounted(() => {
  myChart = echarts.init(chart.value);
  myChart.setOption(option);
});
</script>
